I'm currently working on a personal project just to get a bit better using react.

I use react-router for navigation. My index.js file has the following

import { render } from "react-dom";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import TukTukTours from "./components/TukTukTours";
import BycicleTours from "./components/BicycleTours";
import WalkingTours from "./components/WalkingTours";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
     <Routes>
        <Route path="/" element={<App />} />
        <Route path='tuktuktours' element={<TukTukTours/>}/>
        <Route path='bycicletours' element={<BycicleTours/>}/>
        <Route path='walkingtours' element={<WalkingTours/>}/>
    </Routes>
  </BrowserRouter>,
  rootElement
);

The App component is what loads the main page basically, I have a nav bar there which has a select box that changes between two languages. Once the user changes all the text in the page changes from one language to another. I want the same to happen on my three other pages (Routes above).

For that I want to pass down a state variable to App, WalkingTours, BycicleTours and TukTukTours to dynamically change the content of the pages.

The way I have index.js structured it doesn't look like I can use useState hook to achieve what I want. Something similar to the below;

import { render } from "react-dom";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import TukTukTours from "./components/TukTukTours";
import BycicleTours from "./components/BicycleTours";
import WalkingTours from "./components/WalkingTours";
import { useState } from "react";

const [language, setLanguage] = useState("GB");

const changeLanguage = (language) => setLang(language);
const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
     <Routes>
        <Route path="/" element={<App language={language} setLang={changeLanguage} />} />
        <Route path='tuktuktours' element={<TukTukTours language={language}/>}/>
        <Route path='bycicletours' element={<BycicleTours language={language}/>}/>
        <Route path='walkingtours' element={<WalkingTours language={language}/>}/>
    </Routes>
  </BrowserRouter>,
  rootElement
);

I know the above is not valid because I can't use hooks outside react function components or custom hook functions.

What would be the best way to achieve what I have above?

Many thanks